<template>
  <div>
    <div class="task-info">
      <div class="task-info-header">
        <i></i>
        <span>任务信息</span>
      </div>
      <div class="task-info-content">
        <div class="info-content-top">
          <div class="div-first">
            <div class="row-line-1 color-1 clearfix">
              <p><span>任务来源：</span>{{taskInfo.taskdetail.task_type_text}}</p>
              <p><span>计划日期：</span>{{taskInfo.taskdetail.plan_time}}</p>
            </div>
            <div class="row-line-1 clearfix">
              <p><span>发<i class="space"></i>起<i class="space"></i>人：</span>{{taskInfo.taskdetail.send_user_name}}</p>
              <p :class="{'color-2': taskInfo.taskdetail.is_over_time==1}"><span>截至日期：</span>{{taskInfo.taskdetail.end_time}}</p>
            </div>
            <div class="row-line-1 clearfix">
              <p><span>执<i class="space"></i>行<i class="space"></i>人：</span>{{taskInfo.taskdetail.exec_user_name}}</p>
              <p v-if="taskInfo.taskdetail.cooper_user_name!=''"><span>协<i class="space"></i>同<i class="space"></i>人：</span>{{taskInfo.taskdetail.cooper_user_name}}</p>
              <p v-if="taskInfo.taskdetail.cooper_user_name==''"><span>协<i class="space"></i>同<i class="space"></i>人：</span>无</p>
            </div>
          </div>
          <div class="div-second">
            <div class="row-line-2 clearfix">
              <span class="span-title">任务主题：</span>
              <span class="span-content">{{taskInfo.taskdetail.task_subject}}</span>
            </div>
            <div class="row-line-2 clearfix">
              <span class="span-title">任务内容：</span>
              <span class="span-content" v-html="taskInfo.taskdetail.task_content"></span>
            </div>
          </div>
          <div class="div-third">
            <div class="row-line-2 clearfix" v-if="taskInfo.taskdetail.card_username!=''">
              <span class="span-title">患者姓名：</span>
              <span class="span-content color-3">{{taskInfo.taskdetail.card_username}}</span>
            </div>
            <div class="row-line-2 clearfix" v-if="taskInfo.taskdetail.attach.length>0">
              <span class="span-title">附<i class="space-word"></i>件：</span>
              <span class="span-content">
                <p v-for="(item,index) in taskInfo.taskdetail.attach_names" v-bind:key="index">
                  <a v-if="item.split('.')[1]=='png'||item.split('.')[1]=='jpg'||item.split('.')[1]=='jpeg'" class="color-3" @click="viewImg(taskInfo.taskdetail.attach[index])" href="#">{{item}}</a>
									<a v-else class="color-3" :download="item" :href="taskInfo.taskdetail.attach[index]">{{item}}</a>
                </p>
              </span>
            </div>
          </div>
        </div>
				<div class="info-content-bottom" v-for="(reply,index) in taskInfo.taskdetail.reply_attach" :key="index">
					<div class="row-line-2 clearfix">
						<span class="span-title">执<i class="space"></i>行<i class="space"></i>人：</span>
						<span class="span-content">{{reply.reply_username}}</span>
					</div>
					<div class="row-line-2 clearfix">
						<span class="span-title">任务回复：</span>
						<span class="span-content">{{reply.reply_content}}</span>
					</div>
					<div class="row-line-2 clearfix" v-if="reply.reply_attach.length>0">
						<span class="span-title">附<i class="space-word"></i>件：</span>
						<span class="span-content">
                <p v-for="(item,index) in reply.reply_attach_name" v-bind:key="index">
                  <a v-if="item.split('.')[1]=='png'||item.split('.')[1]=='jpg'||item.split('.')[1]=='jpeg'" class="color-3" @click="viewImg(reply.reply_attach[index])" href="#">{{item}}</a>
									<a v-else class="color-3" :download="item" :href="reply.reply_attach[index]">{{item}}</a>
                </p>
              </span>
					</div>
				</div>
        <div class="info-content-bottom" v-if="showDetailAttach=='1'">
          <el-form :rules="rules" class="dialog-form" ref="comp" :model="complate" label-position="left" label-width="80px">
            <el-form-item label="任务回复：" prop="remark">
              <el-input type="textarea" maxlength="1000" placeholder="请输入内容，限字1000" v-model="complate.remark"></el-input>
            </el-form-item>
            <el-form-item label="上传附件：">
              <el-upload
              class="upload-demo"
              ref="detailUpload"
              action=""
              :limit="5"
              :on-change="beforeUpload"
              :before-remove="beforeRemove"
							:on-exceed="handleExceed"
              :file-list="dialogFileList"
              :auto-upload="false">
                <el-button :slot="trigger" size="small" type="primary">本地上传</el-button>
                <div slot="tip" class="el-upload__tip">最多各传5个附件，每个不超过3M</div>
              </el-upload>
              <el-button v-bind:class="{'mobile-left': trigger === ''}" class="mobile-button" size="small" type="primary" @click="mobileHandle()">手机上传</el-button>
              <ul class="el-upload-list el-upload-list--text">
                <li tabindex="0" class="el-upload-list__item is-ready" v-for="(item, index) of piclist.files" v-bind:key="index">
                  <a class="el-upload-list__item-name">
                    <i class="el-icon-document"></i>{{piclist.files_name[index]}}
                  </a>
                  <label class="el-upload-list__item-status-label">
                    <i class="el-icon-upload-success el-icon-circle-check"></i>
                  </label>
                  <i class="el-icon-close" @click="deleteImg(index)"></i>
                </li>
              </ul>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <el-dialog
      width="300px"
      title="扫描二维码上传"
      :visible.sync="mobileDialog"
      append-to-body>
      <div style="text-align:center">
        <img :src="qrcode" />
      </div>
    </el-dialog>
		<component :is="viewPicture" :dialogViewVisible="dialogViewVisible" :imgs="imgSrc" @updateView="updateView" :showPrint="false"></component>
  </div>
</template>
<style scoped src="./detail.css"></style>
<script>
  import {getMobileImg, deleteMobileImg, taskComplate} from '@/api/task'
  import {getToken} from '@/utils/auth'
  import QRCode from 'qrcode'
	import viewPicture from './viewPicture'
  export default{
    props: {
      taskInfo: Object,
      showDetailAttach: Number
    },
    data() {
      // 数据校验
      var checkRemark = (rule, value, callback) => {
        if (!(value.trim())) {
          this.complate.remark = ''
          return callback(new Error('任务回复不能为空'))
        } else {
          callback()
        }
      }
      return {
				viewPicture: viewPicture,
				imgSrc: [],
				dialogViewVisible: false,
        dialogFileList: [],
        piclist: [],
        mobileDialog: false,
        qrcode: '',
        trigger: 'trigger',
        complate: {
          remark: ''
        },
        setTime: {},
        accept: ['image/png', 'image/gif', 'image/jpg', 'image/jpeg'], // 允许上传的类型
        rules: {
          remark: [{ validator: checkRemark, trigger: 'blur' }]
        },
        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
      }
    },
    created() {
    },
    mounted() {
      // console.log(this.taskInfo.taskdetail.id)
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList)
      },
      handlePreview(file) {
        console.log(file)
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
      },
      beforeUpload(file, fileList) {
        const isJPG = this.accept.indexOf(file.raw.type) // 判断是否是图片
        const isLt3M = file.size / 1024 / 1024 <= 3
        if (!isLt3M) {
          fileList.pop()
          this.$message.error('上传附件不能大于3MB!')
        }
        /* if (fileList.length >= 5) {
          this.trigger = ''
        } */
        return isJPG && isLt3M
      },
      beforeRemove () {
        this.trigger = 'trigger'
      },
			// handleExceed () {
			// 	this.$message.warning('本地上传最多只能上传5个附件')
			// },
      // 获取手机上传图片列表
      getMobileImg () {
        getMobileImg({id: this.taskInfo.taskdetail.id}).then((response) => {
          this.piclist = response.data
          this.setTime = setTimeout(() => {
            this.getMobileImg()
          }, 5000)
        })
      },
      // 删除临时图片
      deleteImg (index) {
        var url = this.piclist.files[index]
        var id = this.piclist.id
        deleteMobileImg({id: id, img_url: url}).then((response) => {
          this.piclist.files.splice(index, 1)
          this.piclist.files_name.splice(index, 1)
        })
      },
      // 生成手机上传二维码
      mobileHandle () {
        var obj = this
        this.getMobileImg()
        QRCode.toDataURL(process.env.BASE_URL + '/mobile/upload?id=' + this.taskInfo.taskdetail.id, {
          width: 200,
          height: 200
        }, function(err, url) {
          if (err) throw err
          obj.qrcode = url
        })
        this.mobileDialog = true
      },
			// 清空校验
			clearVal () {
				this.$nextTick(() => {
					this.$refs['comp'].clearValidate()
				})
			},
      complateTask () {
        this.$refs['comp'].validate((valid) => {
          if (valid) {
						this.$confirm('是否完成该任务?', '提示', {
						 confirmButtonText: '确定',
						 cancelButtonText: '取消',
						 type: 'warning'
						 }).then(() => {
							var fd = new FormData()
							for (const k in this.$refs.detailUpload.$refs['upload-inner'].fileList) {
								fd.append('file[]', this.$refs.detailUpload.$refs['upload-inner'].fileList[k].raw)
							}
							fd.append('token', getToken()) // 用户token
							fd.append('reply_content', this.complate.remark)
							fd.append('task_id', this.taskInfo.taskdetail.id)
							// 如果有手机附件
							if (this.piclist.files !== undefined) {
                for (const key in this.piclist.files) {
                  fd.append('mobile_file[]', this.piclist.files[key])
                }
							}
							taskComplate(fd).then(response => {
								this.$message({
									message: '任务完成!',
									type: 'success',
									onClose: () => {
										this.$nextTick(() => {
											this.$refs['comp'].clearValidate()
											this.$emit('getList')
										})
									}
								})
							})
						 }).catch(() => {
						 })
          } else {
						this.$message({
							message: '请输入任务回复信息',
							type: 'error'
						})
            return false
          }
        })
      },
			viewImg (url) {
				this.imgSrc = []
				this.dialogViewVisible = true
        this.imgSrc.push(url)
			},
			updateView (flag) {
				this.dialogViewVisible = flag
			}
    }
  }
</script>
